<template>
    <a-card :loading="loading" :bordered="false" :body-style="{padding: '0'}">
        <div class="salesCard">
            <a-tabs default-active-key="1" size="large" :tab-bar-style="{marginBottom: '24px', paddingLeft: '16px'}">
                <template #tabBarExtraContent>
                    <div class="extra-wrapper">
                        <div class="extra-item">
                            <a>今日</a>
                            <a>本周</a>
                            <a>本月</a>
                            <a>本年</a>
                        </div>
                        <a-range-picker :style="{width: '256px'}"/>
                    </div>
                </template>
                <a-tab-pane loading="true" tab="销售额" key="1">
                    <a-row>
                        <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
                            <Bar :chartData="barData" :option="{title:{text:'销售额排行',textStyle:{fontWeight:'lighter'}}}" height="40vh"/>
                        </a-col>
                        <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                            <RankList title="门店销售排行榜" :list="rankList"/>
                        </a-col>
                    </a-row>
                </a-tab-pane>
                <a-tab-pane tab="销售趋势" key="2">
                    <a-row>
                        <a-col :xl="16" :lg="12" :md="12" :sm="24" :xs="24">
                            <Bar :chartData="barData.reverse()" :option="{title:{text:'销售额排行',textStyle:{fontWeight:'lighter'}}}" height="40vh"/>
                        </a-col>
                        <a-col :xl="8" :lg="12" :md="12" :sm="24" :xs="24">
                            <RankList title="门店销售排行榜" :list="rankList"/>
                        </a-col>
                    </a-row>
                </a-tab-pane>
            </a-tabs>
        </div>
    </a-card>
</template>
<script lang="ts" setup>
    import {ref} from 'vue';
    import Bar from '/@/components/chart/Bar.vue';
    import RankList from '/@/components/chart/RankList.vue';

    defineProps({
        loading: {
            type: Boolean,
        },
    });
    const rankList = []
    for (let i = 0; i < 7; i++) {
        rankList.push({
            name: '白鹭岛 ' + (i + 1) + ' 号店',
            total: 1234.56 - i * 100
        })
    }

    const barData = []
    for (let i = 0; i < 12; i += 1) {
        barData.push({
            name: `${i + 1}月`,
            value: Math.floor(Math.random() * 1000) + 200
        })
    }
</script>

<style lang="less" scoped>
    .extra-wrapper {
        line-height: 55px;
        padding-right: 24px;

        .extra-item {
            display: inline-block;
            margin-right: 24px;

            a {
                margin-left: 24px;
            }
        }
    }
</style>
